<template>
    <div class="aiRowFourContainer">
            <div style="width: 1000px;margin:0 auto;">
                <p class="parpOne">精研媒体数据 提升转化效果</p>
                <p class="parpTwo">与百万家优质媒体合作，通过强大的媒体数据挖掘系统，全面解读媒体背后粉丝特质并标签化分群人类，
                    基于网民的阅读行为、浏览行为、社交关系等进行人物画像，针对目标受众进行广告投放，真正实现精准营销，
                    从而降低广告成本，提升转化效果。
                </p>
                <button @click="toAISelect">立即体验</button>
            </div>
            <div>
                <ul class="aiDetailOne">
                    <li style="width:388px;margin-top:55px;">
                        <img src="../../assets/img/AI智投/1.png" alt="">
                        <p class="aiPOne">媒体数据库管理</p>
                        <ul>
                            <li><span>第一方媒体数据</span></li>
                            <li><span>第三方媒体数据</span></li>
                            <li><span>媒体专有数据库</span></li>
                        </ul>
                    </li>
                    <li style="width:320px;margin-left:85px;margin-top:55px;">
                        <img src="../../assets/img/AI智投/2.png" alt="">
                        <p class="aiPOne">受众触媒路径分析</p>
                        <ul>
                            <li><span>3亿视频流量</span></li>
                            <li><span>5亿注册用户</span></li>
                            <li><span>7亿活跃用户</span></li>
                        </ul>
                    </li>
                    <li style="width:323px;float:right;margin-top:55px;">
                        <img src="../../assets/img/AI智投/3.png" alt="">
                        <p class="aiPOne" style="margin-top:30px;">媒体效果量化</p>
                        <ul>
                            <li><span>曝光数据</span></li>
                            <li><span>点击数据</span></li>
                            <li><span>互动数据</span></li>
                            <li style="border-right:none;"><span>分享数据</span></li>
                            <li style="margin-left:79px;margin-top:1px;"><span>关注数据</span></li>
                            <li style="margin-top:1px;"><span>转化数据</span></li>
                        </ul>
                    </li>
                    <li style="margin-left:311px;margin-top:65px;">
                        <img src="../../assets/img/AI智投/4.png" alt="">
                        <p class="aiPOne">媒体内容解读</p>
                        <ul>
                            <li><span>娱乐</span></li>
                            <li><span>生活</span></li>
                            <li><span>咨询</span></li>
                            <li><span>购物</span></li>
                        </ul>
                    </li>
                    <li style="margin-left:210px;margin-top:40px;">
                        <img src="../../assets/img/AI智投/5.png" alt="">
                        <p class="aiPOne">媒体投放策略</p>
                        <ul>
                            <li><span>集中型策略</span></li>
                            <li><span>脉动型策略</span></li>
                            <li><span>持续型策略</span></li>
                        </ul>
                    </li>
                </ul>
                <!-- <ul class="aiDetailTwo">
                    <li></li>
                    <li></li>
                </ul> -->
            </div>
            <mask-toast v-if="showMaskToast" @closeMask="closeMask"></mask-toast>
        </div>
</template>
<script>
import maskToast from '../upgrade/upgradeToast'
export default {
    data(){
       return {
            debug: true,
            showMaskToast: false
       }
    },
    methods: {
        toAISelect(){
            if(this.debug){
                this.showMaskToast = true
                return
            }
            this.$router.push({path:'/AISelect'})
        },
        closeMask(data){
            this.showMaskToast = data
        }
    },
    components: {
        maskToast
    }
}
</script>
<style scoped>
.parpOne{
    margin-top: 80px;
    font-size: 30px;
    color:rgb(34, 34, 34);
}
.parpTwo{
    font-size: 16px;
    color:rgb(34, 34, 34);
    margin-top: 26px;
    font-weight: 100
}
button{
    width: 90px;
    height: 30px;
    background-color: #ED413F;
    font-size: 14px;
    color: #fff;
    border-radius: 20px;
    margin-top: 30px;
    box-shadow: 0px 4px 19px #ed9191;
}
.aiRowFourContainer{
    width:1200px;
    margin:0 auto;
    height: 790px;
    text-align: center;
    /* background-color: red; */
}
.aiDetailOne>li{
    float:left;
    text-align: center;
}
.aiDetailOne>li>ul{
    margin-top: 20px;
}
.aiDetailOne>li>ul>li{
    float:left;
}
.aiDetailOne>li>p{
    font-size: 24px;
}
.aiPOne{
    font-size: 24px;
    color:rgb(34, 34, 34);
    margin-top: 40px;
    font-weight: 600;
}
.aiDetailOne>li>ul>li>span{
    font-size: 16px;
    color:rgb(34, 34, 34)
}
.aiDetailOne>li>ul>li{
    padding:0 7px;
    border-right: 1px solid gray;
}
.aiDetailOne>li>ul>li:last-child{
    border-right: none;
}
</style>


